import React from 'react';
import { Button, Form, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import RoleTable from '@/pages/Settings/MenuManagement/components/RoleTable';
import RoleDrawer from '@/pages/Settings/MenuManagement/components/RoleModal';
import { useRoleManagement } from '@/pages/Settings/RoleManagement/hooks';

const RoleManagement: React.FC = () => {
  const {
    roles, loading, modalVisible, editingRole, form, searchForm, pagination,
    setModalVisible, setEditingRole, handleSubmit, handleDelete,
    handleQuery, handleReset, handleTableChange, permissionOptions
  } = useRoleManagement();
  const { t } = useTranslation();

  return (
    <div className="role-management">
      <div className="page-header">
        <h2>{t('roleManagement.title')}</h2>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setEditingRole(null);
            form.resetFields();
            setModalVisible(true);
          }}
        >
          {t('roleManagement.addRole')}
        </Button>
      </div>
      <Form
        form={searchForm}
        layout="inline"
        onFinish={handleQuery}
        style={{ marginBottom: 16 }}
      >
        <Form.Item name="search" label="关键词">
          <Input placeholder="角色名称/编码/描述" allowClear />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">查询</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
      <RoleTable
        roles={roles}
        loading={loading}
        pagination={pagination}
        onChange={handleTableChange}
        onEdit={(role) => {
          setEditingRole(role);
          form.setFieldsValue(role);
          setModalVisible(true);
        }}
        onDelete={handleDelete}
      />
      <RoleDrawer
        visible={modalVisible}
        editingRole={editingRole}
        form={form}
        onClose={() => {
          setModalVisible(false);
          setEditingRole(null);
          form.resetFields();
        }}
        onFinish={handleSubmit}
      />
    </div>
  );
};

export default RoleManagement; 